<template>
	<view class="page">
		<view class="pageBg">
			<image src="https://bjsx.gzwhir.com/admin-api/infra/file/18/get/memberbg2.png" mode="aspectFill"></image>
		</view>
		<view class="flex0">
			<u-navbar :fixed='false' bgColor="transparent" @leftClick="navBack"  title="基本信息">
				<view slot="center" class="navTitle">
					基本信息 
				</view>
			</u-navbar>
		</view>
		<view class="flex1">
			<scroll-view scroll-y="true" class="scrollView pt30">
				<view class="pd30">
					<view class="memberList">
						<view class="item">
							<view class="img">
								<image :src="info.parent.avantar" mode="aspectFill"></image>
							</view>
							<view class="in">
								<view class="bg">
									<image src="https://bjsx.gzwhir.com/admin-api/infra/file/18/get/boxmsk.png" mode="widthFix"></image>
								</view>
								<view class="tag">
									<view class="ico">
										<image src="@/static/images/icon-vip.svg" mode="aspectFit"></image>
									</view>
									<text>家长</text>
									<view class="sd">
										<image src="@/static/images/roundl.png" mode="aspectFill"></image>
									</view>
								</view>
								<view class="it">
									<view class="name">
										{{info.parent.name}}
									</view>
									<view class="isex">
										<view class="ico" v-if="parent.sex==0">
											<image src="@/static/images/icon-female.svg" mode="aspectFit"></image>
										</view>
										<view class="ico" v-else>
											<image src="@/static/images/icon-male.svg" mode="aspectFit"></image>
										</view>
									</view>
								</view>
								<view class="ibot">
									<view class="age">
										{{info.parent.age}}岁
									</view>
									<navigator url="/subpage/patriarch/my/profile" open-type="navigate" class="navigator">
										<text>个人信息</text>
										<view class="ico">
											<image src="@/static/images/icon-more2.svg" mode="aspectFit"></image>
										</view>
									</navigator>
								</view>
							</view>
						</view>
						<view class="item" v-for="(i,index) in info.children" :key="index">
							<view class="img">
								<image :src="i.avantar" mode="aspectFill"></image>
							</view>
							<view class="in">
								<view class="bg">
									<image src="https://bjsx.gzwhir.com/admin-api/infra/file/18/get/boxmsk.png" mode="widthFix"></image>
								</view>
								<view class="tag s2">
									<view class="ico">
										<image src="@/static/images/icon-vip2.svg" mode="aspectFit"></image>
									</view>
									<text>学生</text>
									<view class="sd">
										<image src="@/static/images/roundl.png" mode="aspectFill"></image>
									</view>
								</view>
								<view class="it">
									<view class="name">
										{{i.name}}
									</view>
									<view class="isex">
										<view class="ico" v-if="i.sex==0">
											<image src="@/static/images/icon-female.svg" mode="aspectFit"></image>
										</view>
										<view class="ico" v-else>
											<image src="@/static/images/icon-male.svg" mode="aspectFit"></image>
										</view>
									</view>
								</view>
								<view class="ibot">
									<view class="age">
										{{i.age}}岁
									</view>
									<navigator :url="'/subpage/patriarch/my/memberDetail?id='+i.id" open-type="navigate" class="navigator">
										<text>个人信息</text>
										<view class="ico">
											<image src="@/static/images/icon-more2.svg" mode="aspectFit"></image>
										</view>
									</navigator>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info:''
			}
		},
		methods: {
			getInfo(){
				var that=this;
				var res={
					parent:{
						id:101,
						avantar:'../../../static/upload/parent.png',
						name:'刘大美',
						sex:0,
						age:38,
						userType:1
					},
					children:[
						{
							id:102,
							avantar:'../../../static/upload/student.png',
							name:'刘美美',
							sex:0,
							age:12
						},
						{
							id:103,
							avantar:'../../../static/upload/student2.png',
							name:'刘小聪',
							sex:1,
							age:9
						}
					]
				};
				that.info=res;
			}
		},
		computed:{
			
		},
		mounted(){
			this.getInfo();
		}
	}
</script>

<style lang="scss" scoped>
	.memberList{
		padding-top: 10rpx;
		.item{
			padding-top: 20rpx;
			margin-bottom: 20rpx;
			position: relative;
			z-index: 10;
			&:last-child{
				margin-bottom: 0;
			}
			.img{
				position: absolute;
				left: 40rpx;
				z-index: 10;
				top: 0;
				width: 110rpx;
				height: 110rpx;
				box-sizing: border-box;
				border: 5rpx solid #ffe3c2;
				background: #fff;
				border-radius: 50%;
				overflow: hidden;
				image{
					display: block;
					width: 100%;
					height: 100%;
				}
			}
			.in{
				padding: 130rpx 40rpx 0;
				border-radius: 30rpx;
				position: relative;
				z-index: 5;
				background: #fff;
				overflow: hidden;
				.bg{
					position: absolute;
					right: 0;
					top: 0;
					height: 100%;
					width: 40%;
					z-index: -1;
					display: flex;
					align-items: center;
					image{
						display: block;
						width: 100%;
						height: auto;
					}
				}
				.tag{
					position: absolute;
					right: 0;
					top: 0;
					z-index: 5;
					font-size: 20rpx;
					line-height: 45rpx;
					padding: 0 20rpx 0 30rpx;
					color: #fe9c29;
					display: flex;
					align-items: center;
					.ico{
						flex: 0 0 auto;
						margin-right: 10rpx;
						image{
							display: block;
							width: 24rpx;
							height: 24rpx;
						}
					}
					&.s2{
						background:#f8e1e2;
						color: #e07f82;
					}
					.sd{
						position: absolute;
						left: 0;
						top: 0;
						width: 41rpx;
						height: 100%;
						image{
							display: block;
							width: 100%;
							height: 100%;
						}
					}
				}
				.it{
					display: flex;
					align-items: center;
					padding-bottom: 30rpx;
					border-bottom: 1rpx solid #f7f5f2;
					justify-content: flex-start;
					.t{
						font-size: 40rpx;
						flex: 0 0 auto;
						color: #65554d;
					}
					.ico{
						flex: 0 0 auto;
						margin-left: 20rpx;
						image{
							display: block;
							width: 30rpx;
							height: 30rpx;
						}
					}
				}
				.ibot{
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 120rpx;
					.age{
						flex: 0 0 auto;
						font-size: 28rpx;
						color: #af9c91;
					}
					.navigator{
						display: flex;
						align-items: center;
						font-size: 28rpx;
						color: #fe9c29;
						.ico{
							flex: 0 0 auto;
							margin-left: 20rpx;
							image{
								display: block;
								width: 12rpx;
								height: 24rpx;
							}
						}
					}
				}
			}
		}
	}
</style>
